<template>
	<view>
		<view class="contronal">
			<up-sticky zIndex="1" style="top: 0px;">
				<view class="myhead">
					<uni-icons type="back" size="25" color="#fff" class="icon" @click="navigBack"></uni-icons>
					<view class="search-box">
						<up-icon name="search" size="25"></up-icon>
						<input focus placeholder="薛之谦" class="input" v-model="searchInput" @input="clearInput" />
						<image src="../../static/audio-icons/Enter_delete.png" class="clear_icon" v-if="showClearIcon"
							@click="clearIcon"></image>
					</view>
					<view class="text" @click="searchSend">搜索</view>
				</view>
			</up-sticky>
			<view class="search_result">
				<scroll-view scroll-y="true" class="list" v-show="showClearIcon">
					<view class="item" v-for="(item,i) in result" :key="i" @click="updateInput(item)">
						<up-icon name="search" size="20" color="#fff"></up-icon>
						<text>{{item}}</text>
					</view>
					<view v-if="(result.length==0)"
						style="height: 600rpx;width: 700rpx;color: #fff;display: flex;justify-content: center;line-height: 600rpx;">
						抱歉，没用找到</view>
				</scroll-view>
			</view>
			<view class="body">
				<view class="search_history" v-show="!showClearIcon">
					<view class="head">
						<text>搜索历史</text>
						<image src="../../static/audio-icons/delete.png" @click="deleteAllHistory"></image>
					</view>
					<scroll-view scroll-x="true" style="margin-left: 20rpx;width: 660rpx;">
						<view class="c_text">
							<view v-for="(item,i) in history" :key="i" class="item" @click="updateInput(item)">{{item}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- <view style="position: fixed;bottom: 0;background-color: rgba(47, 87, 122, 0.8);height:40px;width: 750rpx;"></view> -->
		<my-audio></my-audio>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		computed:{
			...mapState('audio',['history'])
		},
		data() {
			return {
				searchInput: '', //搜索的内容
				showClearIcon: false,
				test: ['丑八怪-薛之谦', '演员-薛之谦', '天后-薛之谦', '天外来物-薛之谦',
					'陪你去流浪-薛之谦', '认真的雪-薛之谦', '背对背拥抱-林俊杰', '江南-林俊杰',
					'达尔文-林俊杰', '起风了-林俊杰', '关键词-林俊杰', '泡沫-邓紫棋', '多远都要在一起-邓紫棋',
					'倒数-邓紫棋', '喜欢你-邓紫棋', '句号-邓紫棋', '摩天动物园-邓紫棋'
				],
				result: [],
			};
		},
		onLoad(val) {
			this.searchInput = val.searchInput;
			if(this.searchInput){
				this.showClearIcon = true;
			}
		},
		methods: {
			...mapMutations('audio',['updateHistory','deleteAllHistory']),
			navigBack() {
				// uni.navigateBack(); //后退
				uni.switchTab({
					url: '/pages/audio/audio'
				})
			},
			clearInput(event) {
				this.searchInput = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon() {
				this.searchInput = '';
				this.showClearIcon = false;
			},
			updateInput(val) {
				this.searchInput = val;
				this.searchSend();
			},
			searchSend() {
				if(this.searchInput === '' || this.searchInput === undefined) return
				this.updateHistory(this.searchInput)
				uni.navigateTo({
					url: '/subpkg/search_result/search_result?searchInput=' + this.searchInput
				})
			},
		},
		watch: {
			searchInput(newVal) {
				this.result = [];
				this.test.forEach(item => {
					if (item.toLowerCase().includes(newVal)) {
						this.result.push(item);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.contronal {
			background-image: url('../../static/bgimg.jpg');
			background-size: cover;
			background-position: center;
			height: 100vh;
	
			.myhead {
				position: relative;
				height: 140rpx;
				backdrop-filter: blur(20rpx);
				display: flex;
				justify-content: space-between;
				z-index: 1;
	
				.icon {
					position: absolute;
					top: 70rpx;
					left: 25rpx;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					line-height: 60rpx;
					border-radius: 30rpx;
	
					&:active {
						background-color: rgba(133, 133, 133, 0.5);
						transition: background-color 0.1s;
					}
				}
	
				.text {
					position: absolute;
					top: 70rpx;
					right: 30rpx;
					font-size: 40rpx;
					color: #fff;
	
					&:active {
						transform: scale(0.9);
						transition: transform 0.1s;
					}
				}
	
				.search-box {
					position: absolute;
					width: 520rpx;
					height: 60rpx;
					border: 1rpx solid #000000;
					background: linear-gradient(90deg, rgba(97, 207, 255, 0.5) 0%, rgba(46, 241, 220, 0.5) 50%, rgba(247, 82, 207, 0.5) 100%);
					backdrop-filter: blur(40rpx);
					top: 70rpx;
					left: 100rpx;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					line-height: 60rpx;
					z-index: 3;
	
					.input {
						height: 60rpx;
						color: #fff;
						font-size: 32rpx;
					}
	
					.clear_icon {
						margin-top: 10rpx;
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
	
					&>text {
						font-size: 24rpx;
						display: flex;
						line-height: 60rpx;
					}
				}
			}
	
			.search_result {
				.list {
					height: 1040rpx;
					backdrop-filter: blur(20rpx);
	
					.item {
						height: 80rpx;
						display: flex;
						line-height: 80rpx;
						border-bottom: 1rpx solid #c5c5c5;
	
						text {
							margin-left: 20rpx;
							color: #fff;
						}
	
						&:active {
							background-color: rgba(165, 165, 165, 0.3);
							transition: background-color 0.1s;
						}
					}
				}
			}
	
			.body {
				.search_history {
					margin: 40rpx 20rpx;
					height: 240rpx;
					width: 680rpx;
					border-radius: 40rpx;
					border: 1rpx solid #fff;
					backdrop-filter: blur(20rpx);
	
					.head {
						margin-top: 40rpx;
						margin-left: 40rpx;
						height: 60rpx;
						display: flex;
						justify-content: space-between;
	
						text {
							color: #fff;
						}
	
						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
	
							&:active {
								transform: scale(0.9);
								transition: transform 0.1s;
							}
						}
					}
	
					.c_text {
						height: 100rpx;
						display: flex;
	
						.item {
							margin: 10rpx 10rpx;
							padding: 4rpx 20rpx;
							height: 40rpx;
							border-radius: 30rpx;
							background-color: rgba(164, 164, 164, 0.5);
							backdrop-filter: blur(20rpx);
							font-size: 28rpx;
							display: flex;
							white-space: nowrap;
							line-height: 40rpx;
							color: #fff;
	
							&:active {
								transform: scale(0.9);
								transition: transform 0.1s;
							}
						}
					}
				}
			}
		}
</style>